<template>
  <div style="width: 100%">
    <el-row>
      <div class="listtitle">
        <i></i>
        <div class="txt">涉事人员信息</div>
        <div class="bsleader" v-hasPermi="['opinion:pend:deal']" v-if="searchType == 1 &&
          data != null &&
          ['3', '6'].indexOf(data.lastOperatorType) > -1
          ">
          <el-link type="primary" @click="onCreate">新增涉事人员</el-link>
        </div>
      </div>
    </el-row>

    <el-row class="formbox">
      <el-table :data="involvedPeopleList">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="involvedpName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="involvedpType" label="人员类型" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.involvedpType === "teacher" ? "教师" : "学生" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="involvedpSex" label="性别" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.involvedpSex === "male" ? "男性" : "女性" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="involvedpNumber" label="工号/学号" align="center"></el-table-column>
        <el-table-column prop="involvedpSchool" label="学院" align="center"></el-table-column>
        <el-table-column prop="involvedpAdvisor" label="辅导员" align="center"></el-table-column>
        <el-table-column prop="involvedpSocialPlatform" label="其他传播渠道" align="center"></el-table-column>
        <el-table-column prop="involvedpNation" label="民族" align="center"></el-table-column>
        <el-table-column prop="psychologicalProblemsFlag" label="心理问题" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row | formatPsychologicalProblemsFlag }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="politicalIdentityType" label="政治身份" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.politicalIdentityType !== 9">
              {{ scope.row.politicalIdentityType | formatPoliticalIdentityType }}
            </span>
            <span v-else>
              {{ scope.row.otherPoliticalIdentity }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="religiousFaithFlag" label="宗教信仰" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.religiousFaithFlag === 1 ? scope.row.religiousFaith : "无" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="180" label="操作" align="center" v-hasPermi="['opinion:pend:deal']" v-if="searchType == 1 &&
          data != null &&
          ['3', '6'].indexOf(data.lastOperatorType) > -1
          ">
          <template slot-scope="scope">
            <el-link type="primary" @click="onModify(scope.row)">修改</el-link>
            <el-link type="primary" @click="onDelete(scope.$index)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <div class="dialogcontent">
      <el-dialog :close-on-click-modal="false" :title="personInfo._id ? '修改涉事人员信息' : '添加涉事人员信息'"
        :visible.sync="dialogVisible" width="972px">
        <el-form :style="{ marginTop: '24px', paddingRight: '32px' }" label-width="120px" :rules="rules"
          :model="personInfo" ref="form">
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名：" prop="involvedpName">
                <el-input :style="{ width: '90%' }" v-model="personInfo.involvedpName" placeholder="请填写"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8" :style="{ transform: 'translateX(40px)' }">
              <el-form-item label="涉事人员类型：" prop="involvedpType">
                <el-radio v-model="personInfo.involvedpType" label="teacher">
                  老师
                </el-radio>
                <el-radio v-model="personInfo.involvedpType" label="student">
                  学生
                </el-radio>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="学院：" prop="involvedpSchool">
                <treeselect v-model="personInfo.involvedpSchool" :options="deptOptions" placeholder="请选择归属学院" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="工号/学号：" prop="involvedpNumber">
                <el-input :style="{ width: '90%' }" v-model="personInfo.involvedpNumber" placeholder="请填写"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8" :style="{ transform: 'translateX(40px)' }">
              <el-form-item label="涉事人员性别：" prop="involvedpSex">
                <el-radio v-model="personInfo.involvedpSex" label="male">
                  男性
                </el-radio>
                <el-radio v-model="personInfo.involvedpSex" label="female">
                  女性
                </el-radio>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item v-if="personInfo.involvedpType === 'student'" label="辅导员教师：" prop="involvedpAdvisor">
                <el-input :style="{ width: '100%' }" v-model="personInfo.involvedpAdvisor" placeholder="请填写"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="是否有心理问题" prop="psychologicalProblemsFlag">
                <el-select v-model="personInfo.psychologicalProblemsFlag" style="width: 100%">
                  <el-option key="0" label="否" :value="0"></el-option>
                  <el-option key="1" label="是" :value="1"></el-option>
                  <el-option key="2" label="暂不清晰" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="personInfo.psychologicalProblemsFlag === 1">
              <el-form-item label="心理问题：" prop="psychologicalProblems">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"
                  v-model="personInfo.psychologicalProblems" placeholder="请填写"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="政治身份" prop="politicalIdentityType">
                <!-- 1-党员（预备党员）；2-共青团员；3-群众；9-其他党派（如：中国农工民主党） -->
                <el-select v-model="personInfo.politicalIdentityType" style="width: 100%">
                  <el-option key="1" label="党员（预备党员）" :value="1"></el-option>
                  <el-option key="2" label="共青团员" :value="2"></el-option>
                  <el-option key="3" label="群众" :value="3"></el-option>
                  <el-option key="9" label="其他党派" :value="9"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="personInfo.politicalIdentityType === 9">
              <el-form-item label="其他党派：" prop="otherPoliticalIdentity">
                <el-input :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"
                  v-model="personInfo.otherPoliticalIdentity" placeholder="请填写"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="宗教信仰" prop="religiousFaithFlag">
                <el-select v-model="personInfo.religiousFaithFlag" style="width: 100%">
                  <el-option key="0" label="无" :value="0"></el-option>
                  <el-option key="1" label="有" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="personInfo.religiousFaithFlag">
              <el-form-item label="宗教信仰：" prop="religiousFaith">
                <el-input :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"
                  v-model="personInfo.religiousFaith" placeholder="请填写"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="民族" prop="involvedpNation">
                <el-input :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"
                  v-model="personInfo.involvedpNation" placeholder="请填写"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="其他传播渠道：" prop="involvedpSocialPlatform">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" :style="{ width: '100%' }"
                  v-model="personInfo.involvedpSocialPlatform" placeholder="请填写"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="备注：" prop="involvedpRemark">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" :style="{ width: '100%' }"
                  v-model="personInfo.involvedpRemark" placeholder="请填写"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer-a">
          <el-button @click="() => (dialogVisible = false)">取 消</el-button>
          <el-button type="primary" @click="onSubmit">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },

  props: {
    data: {
      type: Object,
    },
    flow: {
      type: Array,
    },
  },

  data() {
    return {
      searchType: this.$route.params.searchType,
      dialogVisible: false,
      personInfo: {},

      deptOptions: undefined,
      rules: {
        involvedpName: [{ required: true, message: "请输入", trigger: "blur" }],
        involvedpType: [{ required: true, message: "请输入", trigger: "blur" }],
        involvedpSchool: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        involvedpNumber: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        involvedpSex: [{ required: true, message: "请输入", trigger: "blur" }],
        involvedpAdvisor: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        involvedpSocialPlatform: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        psychologicalProblemsFlag: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        psychologicalProblems: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        politicalIdentityType: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        otherPoliticalIdentity: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        religiousFaithFlag: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        religiousFaith: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        involvedpNation: [
          { required: true, message: "请输入", trigger: "blur" },
        ]
      },
    };
  },

  computed: {
    involvedPeopleList() {
      return this.data.involvedPeopleList || [];
    },
  },

  filters: {
    formatPoliticalIdentityType(t) {
      switch (t) {
        case 1:
          return '党员（预备党员）'
        case 2:
          return '共青团员'
        case 3:
          return "群众"
        case 9:
          return "其他党派"
        default:
          return t
      }
    },

    formatPsychologicalProblemsFlag(record) {
      switch (record.psychologicalProblemsFlag) {
        case 0:
          return '无'
        case 1:
          return record.psychologicalProblems
        case 2:
          return '暂不清晰'
      }
    }
  },

  mounted() {
    this.getTreeselect();
  },

  methods: {
    onCreate() {
      this.personInfo = {
        involvedpName: "",
        involvedpType: undefined,
        involvedpSchool: undefined,
        involvedpNumber: undefined,
        involvedpSex: undefined,
        involvedpAdvisor: undefined,
        involvedpSocialPlatform: "",
        involvedpRemark: "",
        psychologicalProblemsFlag: undefined,
        psychologicalProblems: "",
        politicalIdentityType: undefined,
        otherPoliticalIdentity: "",
        religiousFaithFlag: undefined,
        religiousFaith: "",
        involvedpNation: ""
      };
      this.dialogVisible = true;
    },

    onModify(record) {
      if (!this.deptOptions) return;
      const school = this.getFlatDeptOptions().find(
        (d) => d.label === record.involvedpSchool
      );
      this.personInfo = {
        ...record,
        involvedpSchool: school ? school.id : undefined,
      };
      this.dialogVisible = true;
    },

    onDelete(index) {
      this.data.involvedPeopleList.splice(index, 1);
    },

    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },

    getFlatDeptOptions() {
      if (!this.deptOptions) return [];
      const options = [];

      const todo = [...this.deptOptions];
      while (todo.length) {
        const target = todo.pop();
        options.push({
          id: target.id,
          label: target.label,
        });
        todo.push(...(target.children || []));
      }

      return options;
    },

    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        if (!this.data.involvedPeopleList) {
          this.$set(this.data, "involvedPeopleList", [])
          // this.data.involvedPeopleList = [];
        }
        // 更换学院
        const school = this.getFlatDeptOptions().find(
          (d) => d.id === this.personInfo.involvedpSchool
        );
        if (school) {
          this.personInfo.involvedpSchool = school.label;
        }

        if (this.personInfo.involvedpType === "teacher") {
          this.personInfo.involvedpAdvisor = "";
        }

        if (this.personInfo._id) {
          const index = this.data.involvedPeopleList.findIndex(
            (d) => d._id === this.personInfo._id
          );
          this.$set(this.data.involvedPeopleList, index, this.personInfo);
        } else {
          this.personInfo._id = Math.random();
          this.data.involvedPeopleList.push(this.personInfo);
        }

        this.dialogVisible = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.listtitle {
  margin-top: 15px;
  margin-bottom: 20px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;

  .txt {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
  }

  i {
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #2d8cf0;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: 10px;
  }

  .bsleader {
    margin-left: auto;
    margin-right: 20px;
  }
}

.link-label {
  color: #4383e4;
  font-weight: 400;
}

.verify {
  background-color: #ffffff;
  color: #4383e4;
  border-color: #4383e4;

  &:hover {
    background-color: #4383e4;
    border-color: #4383e4;
    color: #ffffff;
  }
}

.cuiban {
  background-color: #ecf5ff;
  color: #4383e4;
  border-color: #4383e4;

  &:hover {
    background-color: #4383e4;
    border-color: #4383e4;
    color: #ffffff;
  }

  &:focus {
    background-color: #ecf5ff;
    border-color: #4383e4;
    color: #4383e4;
  }
}

.duban {
  background-color: #fdf6ec;
  color: #eb7b16;
  border-color: #eb7b16;

  &:hover {
    background-color: #eb7b16;
    border-color: #eb7b16;
    color: #ffffff;
  }

  &:focus {
    background-color: #fdf6ec;
    border-color: #eb7b16;
    color: #eb7b16;
  }
}

.dot-pend {
  height: 12px;
  margin-right: 8px;

  >>>.el-badge__content {
    background-color: #eb7b16 !important;
  }
}

.dot-over {
  height: 12px;
  margin-right: 8px;

  >>>.el-badge__content {
    background-color: #dd021b !important;
  }
}

.ins-dialog {
  font-size: 14px;
  line-height: 25px;
  text-align: justify;

  .ins-label {
    text-align: right;
    color: #294874;
  }

  .el-row {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .resbtn {
    color: #333333;
    padding-top: 0;
    margin-left: 0;
    margin-right: 40px;

    &:hover {
      color: #4383e4;
    }
  }

  /deep/ .el-dialog__header {
    border-bottom: 1px solid #ededf6 !important;
  }

  /deep/ .el-dialog__footer {
    border-top: 1px solid #ededf6 !important;
  }
}

.dialog-footer-a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
</style>


<style lang="scss">
.personnel-involved-container {
  .el-table [class*="el-table__row--level"] .el-table__expand-icon {
    display: inline-block !important;
  }
}

.dialogcontent {
  .el-dialog__title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
    line-height: 22px;
  }

  .el-dialog__body {
    padding: 0 !important;
  }

  .inputbox {
    width: 100%;
    height: 250px;

    .el-textarea__inner {
      border-radius: 0 !important;
    }

    .el-textarea__inner:focus {
      outline: none !important;
      border-color: rgba(51, 51, 51, 1) !important;
    }
  }
}
</style>
